<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-听说考试'"> </Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="header">
              <view class="title">
                <view class="title_content"> 听说考试 </view>
                <view class="title_noop"></view>
                <view class="title_bg">
                  <image
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/title_bg2.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
              <view class="tabs">
                <view class="tabs_content">
                  {{ taskInfo.name }}
                </view>
              </view>
            </view>
            <view class="list">
              <ListeningChoice
                ref="listeningChoice"
                v-if="questionType === 1"
                :type="type"
                :taskInfo="taskInfo"
                :questionProgress="questionProgress"
                :questionInfo="questionInfo"
                :questionList="questionList"
                :doneCount="doneCount"
                :questionCount="questionCount"
                @submit="submit"
              ></ListeningChoice>
              <ListeningRecord
                ref="listeningRecord"
                v-if="questionType === 2"
                :type="type"
                :taskInfo="taskInfo"
                :questionInfo="questionInfo"
                :questionList="questionList"
                :doneCount="doneCount"
                :questionCount="questionCount"
                @submit="submit"
              ></ListeningRecord>
              <ReadingAloud
                ref="readingAloud"
                v-if="questionType === 3"
                :type="type"
                :taskInfo="taskInfo"
                :questionProgress="questionProgress"
                :questionInfo="questionInfo"
                :questionList="questionList"
                :doneCount="doneCount"
                :questionCount="questionCount"
                @submit="submit"
              ></ReadingAloud>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findQuestion, elstSave } from "@/api/elst";
export default {
  components: {},
  beforeRouteLeave(to, from, next) {
    if (this.questionType === "1") {
      this.$refs.listeningChoice.pause();
    } else if (this.questionType === "2") {
      this.$refs.listeningRecord.pause();
    } else if (this.questionType === "3") {
      this.$refs.readingAloud.pause();
    }
    next();
  },
  computed: {
    percent() {
      if (this.duration > 0) {
        return parseInt((this.currentTime / this.duration) * 100);
      }
    },
    countDown() {
      return parseInt(this.duration - this.currentTime);
    },
  },
  filters: {
    timeFilter(value) {
      let minute =
        Math.floor(value / 60) >= 10
          ? Math.floor(value / 60)
          : "0" + Math.floor(value / 60);
      value -= 60 * minute;
      let second = value >= 10 ? value : "0" + value;
      return minute + ":" + second;
    },
  },
  data() {
    return {
      type: "0",
      chapterId: "",
      questionProgress: "",
      taskInfo: {},
      questionInfo: {},
      questionList: [],
      questionType: "",
      doneCount: 0,
      questionCount: 0,
    };
  },
  onLoad(option) {
    this.type = option.type;
    this.chapterId = option.chapterId;
    this.init();
  },
  methods: {
    init() {
      let params = {
        chapterId: this.chapterId,
        type: this.type,
      };
      findQuestion(params).then((res) => {
        this.lastStudy = res.data.lastStudy;
        if (this.lastStudy) {
          uni.redirectTo({
            url: `/pages/examination/examinationReportDetail?chapterId=${this.chapterId}&type=${this.type}`,
          });
          return;
        }
        this.taskInfo = res.data.task;
        this.questionInfo = res.data.question;
        this.questionList = res.data.itemList;
        this.questionType = this.taskInfo.type;
        this.doneCount = res.data.doneCount;
        this.questionCount = res.data.questionCount;
      });
    },
    submit(list) {
      let params = {
        questionId: this.questionInfo.id,
        type: this.type,
        answers: list,
      };
      elstSave(params).then((res) => {
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./examinationDetail.scss";
</style>
